import React, { useEffect, useState } from 'react';
import subscribe from '@/assets/icon-subscribe.svg';
import subscribeActive from '@/assets/icon-subscribe-active.svg';
import share from '@/assets/icon-share.svg';
import filter from '@/assets/icon-filter.svg';
import drill from '@/assets/icon-drill.svg';
import editing from '@/assets/icon-edit.svg';
import edit from '@/assets/icon-open-edit.svg';
import deletes from '@/assets/icon-delete.svg';
import backTop from '@/assets/icon-backtop.svg';

interface IconProps {
  type: string;
  width?: number | string;
  height?: number | string;
  styles?: React.CSSProperties | null;
  onClick?:
    | ((event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void)
    | undefined;
}

export default (props: IconProps) => {
  const { type, width, height, styles, onClick } = props;
  const [iconSrc, setIconSrc] = useState('');

  useEffect(() => {
    switch (type) {
      case 'subscribe':
        setIconSrc(subscribe);
        break;
      case 'share':
        setIconSrc(share);
        break;
      case 'filter':
        setIconSrc(filter);
        break;
      case 'drill':
        setIconSrc(drill);
        break;
      case 'subscribeActive':
        setIconSrc(subscribeActive);
        break;
      case 'editing':
        setIconSrc(editing);
        break;
      case 'edit':
        setIconSrc(edit);
        break;
      case 'deletes':
        setIconSrc(deletes);
        break;
      case 'backTop':
        setIconSrc(backTop);
        break;
    }
  }, [type]);

  return (
    <img
      className="jx__icon"
      src={iconSrc}
      width={width}
      height={height}
      style={{ ...styles }}
      onClick={onClick}
      alt=""
    />
  );
};
